<template>
    <h1>APP 组件</h1>
    <hr />
    <h1>原价: {{ price }} <button @click="price = 500">修改原价</button></h1>
    <h1>会员价: {{ vipPrice }}</h1>

    <button @click="appName = '李四'">修改名字: {{ appName }}</button>
    <hr />
    <ul>
        <li>id: {{ obj.id }}</li>
        <li>age: {{ obj.age }} <button @click="obj.age++">增加年龄</button></li>
    </ul>
</template>

<script setup>
import { ref, watch, reactive } from "vue";

const price = ref(1000);
const vipPrice = ref(0);

const appName = ref("张三");

const obj = reactive({
    id: "QF001",
    age: 18,
});

// watch('侦听的值', '一个回调函数, 会在侦听的值发生变化的时候执行', '一个对象, 对当前侦听器的一些配置项')
// watch(price, () => {
//     // console.log('此时 price 发生变化')
//     vipPrice.value = price.value / 2
// }, { immediate: true })

/**
 *  选项式开发中, 侦听器本身只能侦听一个值, 如果需要侦听多个值, 我们需要很多额外的操作
 *      1. 在计算属性中, 返回一个对象, 对象内部是你需要监听的多个值
 *      2. 在侦听器中添加一个对这个计算属性的监听, 并且需要开启 深层监听
 *
 *  但是组合式开发中, 如果 watch 需要侦听多个值, 我们只需要将第一个参数更换为一个数组
 *      数组内, 书写你需要侦听的 数据
 */
watch([price, appName], () => {
    console.log("当前侦听器会在 price/appName 的值发生变化的时候执行");

    vipPrice.value = price.value / 2;
});

watch(obj, () => {
    console.log("当前obj侦听器执行~~");
});
</script>

<style></style>
